@use "../../../colors";
@use "../../../frameless";

.driver-popover.gui-journey {
    max-width: unset;
    padding: 0;
    border-radius: 15px;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);

    .driver-popover-close-btn {
        display: flex !important;
        justify-content: center;
        align-items: center;
        height: 2.5rem;
        width: 2.5rem;
        border-radius: 50%;
        margin: 0.5rem;
        color: colors.$type-white;
        background-color: colors.$ui-aqua-dark;

        .close-btn-img {
            height: 1.25rem;
            width: 1.25rem;
        }
    }

    .driver-popover-title {
        padding: 1rem 0;
        font-size: 1rem;
        font-weight: 700;
        font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
        text-align: center;
        color: colors.$type-white;
        margin: 0;
        background-color: colors.$ui-aqua;
        border-radius: 15px 15px 0 0;
    }

    .driver-popover-title[style*=block]+.driver-popover-description {
        margin: 0;
    }

    .driver-popover-description {
        .title {
            padding: 1rem 0;
            font-size: 1.125rem;
            font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
            font-weight: 400;
            text-align: center;
            color: colors.$type-gray;
            background-color: colors.$ui-light-primary;
        }
        
        .description-wrapper {
            flex-direction: row;
            justify-content: space-evenly;
            gap: 3rem;
            margin: 3rem 4rem;
        
            .journey-option {
                flex-direction: column;
                justify-content: center;
                gap: 1rem;
        
                img {
                    height: frameless.$cols2;
                }
            }
        }
    }
}
